<template>
	<view class="myNumber">
		<view class="box disFlex">
			<image src="../../../static/img/jf.png" mode=""></image>
			<view class="numBox">
				<text style="color:#bec9d7 ;">剩余积分</text>
				<view class="number">{{integral}}</view>
				<view class="explain">当前积分 租赁缴费可抵扣{{integral/100}}元</view>
			</view>
		</view>
		<view class="fg"></view>
		<view class="jl">使用记录</view>
		<view class="box disFlex" v-for="(v,i) in info" :key='i'>
			<image src="../../../static/img/jf.png" mode=""></image>
			<view class="numBox">
				<text style="color:#bec9d7 ;">{{v.source}}</text>
				<view class="number">{{v.integral}}</view>
				<!-- <view class="explain">当前积分 租赁缴费可抵扣{{v.integral/100}}元</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				integral:'',
			}
		},
		onLoad(option) {
			this.integral=option.integral
			this.getinfo()
		},
		methods: {
			getinfo(){
				this.http('/api/user/integral', 'post', {}, )
					.then((res) => {
						console.log(res)
						this.info=res.data.data
						this.info.map((v)=>{
						v.source=v.source.substring(0,4)
						})
					})
			}
		}
	}
</script>

<style lang="less">
	.myNumber{
		padding: 0 40rpx;
		.fg{
			background-color: #eee;
			width: 100%;
			height: 10rpx;
		}
		.jl{
			margin-top: 40rpx;
			font-size: 40rpx;
			color:#bec9d7 ;
		}
		.box{
			margin-top: 40rpx;
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}
		.numBox{
			padding-left: 28rpx;
			flex: 1;
			.number{
				font-size: 48rpx;
				color: #FFBC14;
				&:after{
					content: '积分';
					font-size: 28rpx;
					padding-left: 10rpx;
				}
			}
			.explain{
				font-size:24rpx;
				color:rgba(190,201,215,1);
			}
		}
	}
</style>
